<template>
<el-upload action="#" list-type="picture-card" 
:auto-upload="false"
 ref="uploadRef"
:on-change="uploadFile"
:on-remove="handleRemove"
:file-list="fileList"
:limit="3"
:on-exceed="moreLimit"
 >
    <el-icon><Plus /></el-icon>

   
  </el-upload>

  <el-dialog v-model="dialogVisible">
    <img w-full :src="dialogImageUrl" alt="Preview Image" />
  </el-dialog>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import {  Plus } from '@element-plus/icons-vue'
import {NewType} from "@/type/BaseType"
import { ElMessage, UploadFiles, type UploadFile ,type UploadUserFile} from 'element-plus'
import { uploadImageApi } from '@/api/image';
//注册事件
const emits = defineEmits(['getImg'])
//图片上传组件的ref属性
const uploadRef = ref()
const dialogImageUrl = ref('')
const dialogVisible = ref(false)
type PropType = {
  fileList: UploadUserFile[]  //回显数据
  oldUrl: Array<{url:string}> //原来的图片
}
//接收父组件传递的参数
const props = withDefaults(defineProps<PropType>(), {
  fileList: () => [],
  oldUrl:()=>[]
})
//返回给父组件的值
const newImgRes = ref<NewType>({
  newImgUrl: [],
  deleteUrl:[]
})

//删除图片
const handleRemove = (file: UploadFile) => {
  if(props.oldUrl.some(item => item.url === file.name)){
    newImgRes.value.deleteUrl.push({url:file.name})
    emits("getImg", newImgRes.value);
  }else{
    let images = newImgRes.value.newImgUrl.filter((item) => item.url != file.name);
    newImgRes.value.newImgUrl = images;
    emits("getImg", newImgRes.value);
  }
};
//文件个数超出
const moreLimit = (files: File[], uploadFiles: UploadFiles) => {
  ElMessage.warning("最多只能上传" + uploadFiles.length + "张图片!");
};

//上传文件
const uploadFile = async (file:any) => {
//判断选择的图片是不是图片类型
const typeArr = ["image/png", "image/gif", "image/jpeg", "image/jpg"];
  const isImg = typeArr.indexOf(file.raw.type) !== -1;
  const isMore3M = file.size / 1024 / 1024 < 3;
  if (!isImg) {
    ElMessage.warning("只能上传图片类型!");
    uploadRef.value?.clearFiles();
    return;
  }
  if (!isMore3M) {
    ElMessage.warning("图片大小不能超过3M!");
    uploadRef.value?.clearFiles();
    return;
  }
  //组装上传的数据
  const formData = new FormData();
  formData.append("file", file.raw);
  //提交数据
  const res = await uploadImageApi(formData);
  if (res && res.code == 200) {
    ElMessage.success('图片上传成功！')
    file.name == process.env.BASE_API + res.data;
    //设置到返回子组件的数据里面
    newImgRes.value.newImgUrl.push({
      url:process.env.BASE_API + res.data
    })
    // console.log(newImgRes.value.newImgUrl)
    emits('getImg',newImgRes.value)
  }
  
}
</script>

<style scoped>

</style>
